<template>
	<view class="" style="display: flex;flex-direction: column;align-items: center;width: 100%;margin-top: 40upx;">
		<!-- 头像显示区域 -->
		<view class="" style="width: 200upx;height: 200upx;border-radius:50%;border: 1upx solid #C0C0C0;">
			<image :src="TempImg.path" mode="" style="width: 200upx;height: 200upx;border-radius:50%;" @click="changeImg"></image>
		</view>
		<!-- 好友姓名显示 -->
		<view class="text" style="margin-top: 40upx;"@click="open2()">
			<uni-popup ref="popupInput" type="dialog">
				<uni-popup-dialog mode="input" :value="friendInfo.friendName" @close="close2" title="好友姓名" @confirm="confirmName"></uni-popup-dialog>
			</uni-popup>
			{{friendInfo.friendName}}
		</view>
		<!-- 信息列表显示区域 -->
		<view class="" style="width: 90%; margin-top: 50upx; padding-top: 10upx;">
			<view class="item" @click="changeSex()" >
				<view class="text">性 别：</view>
				<view class="text1">
					{{friendInfo.friendSex}}
				</view>
			</view>
			<view class="item">
				<view class="text">生 日：</view>
				<view class="text1">
					<picker mode="date" :value="friendInfo.friendBirthday" @change="bindDateChange">
						<view>{{friendInfo.friendBirthday}}</view>
					</picker>
				</view>
			</view>
			<view class="item" @click="open">
				<view class="text">电 话：</view>
				<view class="text1">
					<uni-popup ref="popup" type="dialog">
						<uni-popup-dialog mode="input" :value="friendInfo.friendTel" @close="close" @confirm="confirm"></uni-popup-dialog>
					</uni-popup>
					{{friendInfo.friendTel}}
				</view>
			</view>
			<view class="item" @click="changeRelation">
				<view class="text">关 系：</view>
				<view class="text1">
					{{friendInfo.friendRelation}}
				</view>
			</view>
			<view class="item" style=" margin-bottom: 20upx;">
				<view class="text">距离下一个生日还有： 
					<text style="width: 120upx;border-bottom: #aaaa7f solid 4upx;margin-left: 10upx;color: #ccb5bd;">{{NextBirthDays}}</text> 
					<text style="margin-left: 35upx;">天</text></view>
				
			</view>
			<view class="anniu">
				<view class="anniu1"><button type="primary" plain="true" @click="UpdateOrCreate">{{button.title1}}</button></view>
				<view class="anniu2"><button type="warn" plain="true"  @click="DeleteOrBack">{{button.title2}}</button></view>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				button:{
					"title1":"",
					"title2":""
				},
				TempImg:{},
				createNew:false,
				friendInfo:{
					"_id":'',
					"friendName":"",
					"friendSex":'',
					"friendBirthday":"",
					"friendTel":"",
					"friendRelation":"",
					"UserImg":""
				}
			}
		},
		onLoad(option) {
			let that = this
			console.log(option)
			if(option._id!="undefined"){
				//进行好友编辑
				uni.setStorageSync("friendID",option._id)
				that.createNew=false;
				that.button={
					"title1":"修改",
					"title2":"删除"
				}
				uniCloud.callFunction({
					name:"Search",
					data:{
						"_id":option._id
					}
				}).then(res=>{
					that.friendInfo=res.result.data[0]
					that.TempImg.path=res.result.data[0].UserImg
				})
			}else{
				//进行好友信息新增
				that.createNew=true;
				that.button={
					"title1":"新增",
					"title2":"返回"
				}
				that.friendInfo={
					"friendName":"输入朋友姓名",
					"friendSex":"选择性别",
					"friendBirthday":"0001-01-01",
					"friendTel":"输入联系电话",
					"friendRelation":"选择关系",
					"UserImg":"",
					"UserAccount":uni.getStorageSync("UserAccount")
				}
			}
		},
		methods:{
			DeleteOrBack(){
				if(!this.createNew){
					uniCloud.callFunction({
						name:"delete",
						data:{
							_id:this.friendInfo._id
						}
					}).then(res=>{
						console.log(res)
					})
				}
				uni.navigateBack({
					delta:1
				})
			},
			async UpdateOrCreate(){
				let that=this
				console.log(that.friendInfo)
				console.log("上传图片。。")
				uniCloud.uploadFile({
					cloudPath:that.TempImg.name,
					filePath:that.TempImg.path,
					success: (res) => {
						console.log(res)
						that.friendInfo.UserImg=res.fileID
						console.log("调用updata")
						console.log(that.friendInfo)
						let FunName
						if(that.createNew){
							FunName="createNewInfo"
						}else{
							FunName="updata"
						}
						uniCloud.callFunction({
							name:FunName,
							data:that.friendInfo,
							success: (res) => {
								console.log(res)
								if(res.success){
									uni.navigateBack({
										detal:1,
									    
									})
								}
							},
							fail: (err) => {
								console.log(err)
							}
						})
					}
				})
			},
			changeImg(){
				uni.chooseImage({
					count:1,
					success: (res) => {
						console.log(res)
						this.TempImg=res.tempFiles[0]
					}
				})
			},
			open(){
				this.$refs.popup.open()
			},
			confirm(value){
				console.log(value)
				this.friendInfo.friendTel=value
				this.$refs.popup.close()
			},
			close(){
				this.$refs.popup.close()
			},
			open2(){
				this.$refs.popupInput.open()
			},
			close2(){
				this.$refs.popupInput.close()
			},
			confirmName(value){
				this.friendInfo.friendName=value
				this.$refs.popupInput.close()
			},
			changeSex(){
				uni.showActionSheet({
					itemList:['男','女'],
					success: (res) => {
						console.log(res.tapIndex)
						if(res.tapIndex==0){
							this.friendInfo.friendSex='男'
						}else{
							this.friendInfo.friendSex='女'
						}
					}
				})
			},
			changeRelation(){
				uni.showActionSheet({
					itemList:['父亲','母亲','兄弟姐妹','丈夫','妻子','儿子','女儿','朋友','亲戚','同事'],
					success: (res) => {
						console.log(res.tapIndex)
						switch(res.tapIndex){
							case 0:
							this.friendInfo.friendRelation='父亲'
							return;
							case 1:
							this.friendInfo.friendRelation='母亲'
							return;
							case 2:
							this.friendInfo.friendRelation='兄弟姐妹'
							return;
							case 3:
							this.friendInfo.friendRelation='丈夫'
							return;
							case 4:
							this.friendInfo.friendRelation='妻子'
							return;
							case 5:
							this.friendInfo.friendRelation='儿子'
							return;
							case 6:
							this.friendInfo.friendRelation='女儿'
							return;
							case 7:
							this.friendInfo.friendRelation='朋友'
							return;
							case 8:
							this.friendInfo.friendRelation='亲戚'
							return;
							case 9:
							this.friendInfo.friendRelation='同事'
							return;
						}
					}
				})
			},
			bindDateChange(e){
				this.friendInfo.friendBirthday=e.target.value
			}
		},
		computed:{
			NextBirthDays:function(){			
				let nextBirth
				let nextBirthDays
				if(this.friendInfo.friendBirthday!=null){
					let BirthTemp=this.friendInfo.friendBirthday.split("-");
					let nowDate = new Date();
					let Y=nowDate.getFullYear()
					let M=[(nowDate.getMonth()+1)<10?("0"+(nowDate.getMonth()+1)):(nowDate.getMonth()+1)]
					let D =[nowDate.getDate()<10?("0"+nowDate.getDate()):(nowDate.getDate())]
					let today=Y+"-"+M+"-"+D
					let Today = new Date(today).getTime();
					let leftD=0
					let leftDays=0
					let n=(parseInt(M)-parseInt(BirthTemp[1]))
					if(n==0){
						leftD=parseInt(BirthTemp[2])-parseInt(D)
						if(leftD<0){
							Y=Y+1;
						}
					}else if(n>0){
						Y=Y+1
					}
					let nextBirth=Y+"-"+BirthTemp[1]+"-"+BirthTemp[2]
					let NextB=new Date(nextBirth).getTime();
					nextBirthDays = Math.floor((NextB-Today)/(1000*60*60*24))
				}else{
					let nextBirthDays =0
				}
				return nextBirthDays;
			}
			
		}
	}
</script>

<style>
	.item{
		display: flex;
		line-height: 90upx;
		font-size: 45upx;
		margin-top: 20upx;
		
	}
	.text{
		color: #00AA7F;
	}
	.text1{
		width: 450upx;
		border-bottom: #aaaa7f solid 4upx;
		margin-left: 10upx;
		font-size: 40upx;
		color: #ccb5bd;
	}
	.text2{
		width: 120upx;
		border-bottom: #aaaa7f solid 4upx;
		margin-left: 10upx;
		color: #ccb5bd;
	}
	.anniu{
		margin-top: 60upx;
		display: flex;
	}
	.anniu1{
		margin-right: 60upx;
		width: 300upx;
		background-color: #fffbb8;
		border-radius: 30upx;
	}
	.anniu1 button{
		font-size: 45upx;
		color: #7880ca;
		border: 4upx solid #808080;
		
	}
	.anniu2{
		width: 300upx;
		background-color: #a7c6ff;
	}
	.anniu2 button{
		font-size: 45upx;
		color: #137f57;
		border: 4upx solid #808080;
		
	}
</style>
